<template>
	<div class="ServiceFeedback">
		<el-form :inline="true" ref="form" :model="form" label-width="80px">
			<div>
				<el-form-item label="客户" style="margin-left: -40px;">
					<el-input v-model="form.clientame"></el-input>
				</el-form-item>
				<el-form-item label="概要">
					<el-input v-model="form.summary"></el-input>
				</el-form-item>
				<el-form-item label="创建日期">
					<el-col :span="24">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.createTime" style="width: 100%;">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button @click="pageshow" plain>搜索</el-button>
					<el-button @click="showAll" plain>显示全部</el-button>
				</el-form-item>
			</div>
		</el-form>
		<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
			<el-table-column prop="Number" label="编号" width="60" type="index">
			</el-table-column>
			<el-table-column prop="clientName" label="客户">
			</el-table-column>
			<el-table-column prop="summary" label="概要">
			</el-table-column>
			<el-table-column prop="serviceType" label="服务类型" :filters="opition1" :filter-method="filterTag"
				filter-placement="bottom-end">
			</el-table-column>
			<el-table-column prop="creatName" label="创建人">
			</el-table-column>
			<el-table-column prop="createTime" label="创建日期">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="60">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="show(scope.$index, scope.row)"
						class="el-icon-edit-outline">反馈</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="服务归档" :visible.sync="addVisible" width="65%" :modal-append-to-body="false">
			<table id="tableshow" border="0" cols="20" rows="20">
				<tr>
					<th>编号</th>
					<th>{{index+1}}</th>
					<th>服务类型</th>
					<th>{{resdata.serviceType}}</th>
				</tr>
				<tr>
					<th>概要</th>
					<th> {{resdata.summary}}</th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<th>客户</th>
					<th>{{resdata.clientName}}</th>
					<th>状态</th>
					<th>{{resdata.stateName}}</th>
				</tr>
				<tr>
					<th>服务请求</th>
					<th>{{resdata.requestService}}</th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<th>创建人</th>
					<th>{{resdata.creatName}}</th>
					<th>创建时间</th>
					<th>{{resdata.createTime}}</th>
				</tr>
				<tr>
					<th>分配给</th>
					<th>{{resdata.assignedName}}</th>
					<th>分配时间</th>
					<th>{{resdata.assignedTime}}</th>
				</tr>
				<tr>
					<th>服务处理</th>
					<th>{{resdata.operatorContent}}</th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<th>处理人</th>
					<th>{{resdata.handlerName}}</th>
					<th>处理时间</th>
					<th>{{resdata.handlerTime}}</th>
				</tr>
				<tr>
					<th>处理结果</th>
					<th>
						<el-input v-model="processResult" placeholder="请输入"></el-input>
					</th>
					<th>满意度</th>
					<th>
						<el-select v-model="stars" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</th>
				</tr>
			</table>
			<table style="text-align: center;padding-top: 40px;position: relative;margin-left: 43%;">
				<tr>
					<th colspan="2">
						<el-button type="primary" @click="save()" plain>保存</el-button>
					</th>
					<th colspan="2">
						<el-button type="primary" @click="show()" plain>返回</el-button>
					</th>
				</tr>
			</table>
		</el-dialog>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "ServiceFeedback",
		props: ["msg"],
		data() {
			return {
				userId:'',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				addVisible: false,
				opition1: [],
				options: [{
					value: 1,
					label: '☆'
				}, {
					value: 2,
					label: '☆☆'
				}, {
					value: 3,
					label: '☆☆☆'
				}, {
					value: 4,
					label: '☆☆☆☆'
				}, {
					value: 5,
					label: '☆☆☆☆☆'
				}],
				form: {
					clientame: "",
					summary: "",
					servesType: "",
					createTime: "",
					serveState: ""
				},
				tableData: [],
				serveType: [],
				serveState: [],
				resdata: [],
				stars: 1,
				index: "",
				processResult: "",
				state: ""
			};
		},
		mounted() {
			this.userId = localStorage.getItem("userId");
			this.pageshow();
		},
		methods: {
			filterTag(value, row) {
				return row.serviceType === value;
			},
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
			pageshow() {
				this.$http
					.get("/serveList/serviceHandle", {
						params: {
							name: this.form.clientame,
							summry: this.form.summary,
							createTime: this.form.createTime,
							userId:this.userId,
							from: 3
						}
					})
					.then(response => {
						this.tableData = response.data.data;
					})
				this.$http.get('serveList/getServeType').then(response => {
					this.opition1 = response.data.data;
				}).catch(function (error) {
					console.log(error);
				});
			}, showAll() {
				this.form = {};
				this.pageshow();
			},
			show(index, row) {
				this.processResult = "";
				this.stars = 1;
				if (row != undefined) {
					this.index = index;
					this.resdata = row;
				}
				if (this.addVisible == false) {
					this.addVisible = true;
				} else {
					this.addVisible = false;
				}
			},
			save() {
				if (this.processResult === "" || this.processResult === null) {
					this.$notify.error({
						title: "处理结果不能为空，故无法保存",
						message: '😭',
						type: "空空"
					});
				} else {
					if (this.stars < 3) {
						this.state = 2;
					} else {
						this.state = 4;
					}
					this.$http.get('/serveList/updateServeList', {
						params: {
							id: this.resdata.id,
							processResult: this.processResult,
							stars: this.stars,
							state: this.state
						}
					}).then(response => {
						if (response.data.code == 0) {
							this.pageshow();
							this.addVisible = false;
							this.$notify({
								title: response.data.msg,
								message: '☺',
								type: 'success'
							});
						} else {
							this.$notify.error({
								title: response.data.msg,
								message: '😭',
								type: 'error'
							});
						}
					}).catch(function (error) {
						console.log(error);
					});
				}
			},
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			}
		}
	};
</script>

<style scoped>
	#tableshow tr th {
		width: 800px;
		height: 40px;
		border-radius: 3px;
	}


	#tableshow tr th:nth-child(1) {
		background: #D3DCE6;
		font-family: "微软雅黑";
	}

	#tableshow tr th:nth-child(3) {
		background: #D3DCE6;
	}

	body {
		font-family: Arial;
		font-size: 14px;
		line-height: 180%;
		padding-top: 20px;
	}

	/*总控制，可忽略此行*/
	#tableshow {
		border-top: 1pt solid #C1DAD7;
		border-left: 1pt solid #C1DAD7;
		margin: 0 auto;
	}

	td {
		padding: 5px 10px;
		text-align: center;
		border-right: 1pt solid #C1DAD7;
		border-bottom: 1pt solid #C1DAD7;
	}



	/*鼠标悬停后表格背景颜色*/

	#tableshow {
		border-collapse: collapse;
		font-size: 18px;
	}
</style>